<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>第1个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <li>第4个孩子</li>
    <li>第5个孩子</li>
    <p>这里是p标签</p>
  </ul>
</body>
<script>
  // 事件委托
  //给父元素添加点击事件，修改子元素的样式
  const ul = document.querySelector('ul');
  ul.addEventListener('click', function (e) {
    //this.style.color = 'blue'; // 全部li元素都会变蓝色
    //找到我点击的子元素，只修改他的样式 
    //function添加一个参数，就是事件对象event，简写为e
    console.log(e);
    //里面有traget属性，就是我点击的子元素
    //e.target.style.color = 'red'; //只修改我点击的子元素的颜色
    if (e.target.nodeName === 'LI') {
      e.target.style.color = 'red'; //只修改我点击的为li的子元素的颜色
    }
    if (e.target.nodeName === 'P') {
      e.target.style.color = 'green'; //只修改我点击的为p的子元素的颜色
    }
    console.log(e.target); // 打印我点击的子元素
  })
</script>

</html>